<template>
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />

    <!-- 上拉加载更多 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!-- 文章的列表 -->
      <article-list :list="searchResult" :closable="false"></article-list>
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from '@/api/searchAPI'
// 1. 导入文章列表组件
import ArticleList from '@/views/Home/ArticleList.vue'

export default {
  name: 'SearchResult',
  props: ['kw'],
  data() {
    return {
      // 查询的结果
      searchResult: [],
      // 页码值
      page: 1,
      // 是否正在请求数据
      loading: false,
      // 所有数据是否加载完毕了
      finished: false,
      // 组件被缓存的时候，记录一下搜索的关键词
      preKw: ''
    }
  },
  created() {
    // 预调用方法，请求列表数据
    // this.getSearchList()
  },
  // 组件被激活了
  activated() {
    if (this.preKw !== '' && this.preKw !== this.kw) {
      this.searchResult = []
      this.page = 1
      this.loading = false
      this.finished = false
      this.getSearchList()
    }
  },
  // 组件被缓存了
  deactivated() {
    // 在组件被缓存的时候，把关键词存储到 preKw 中
    this.preKw = this.kw
  },
  methods: {
    // 请求列表数据
    async getSearchList() {
      console.log(this.kw)
      const { data: res } = await getSearchResult(this.kw, this.page)
      if (res.message === 'OK') {
        // 请求完成
        this.searchResult = [...this.searchResult, ...res.data.results]
        // 重置 loading 的状态
        this.loading = false
        // 判断所有数据是否加载完毕了
        if (res.data.results.length === 0) {
          this.finished = true
        }
        // 当这次请求完毕之后，为下一次请求做准备，让页码值 + 1
        this.page += 1
      }
    },
    // 上拉加载更多的事件处理函数
    onLoad() {
      console.log('触发了上拉加载更多')
      this.getSearchList()
    }
  },
  components: {
    ArticleList
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
